<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>Fixed Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/plugin/bootstrap/css/navbar-fixed-top.css" rel="stylesheet">
    <link href="/static/css/custom.css" rel="stylesheet">

    {% block head-js %}
    {% endblock %}
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://v3.bootcss.com/examples/navbar-fixed-top/#">草榴社区</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="{% url 'index' %}">综合区</a></li>
            <li><a href="{% url 'category' 1 %}">欧美专区</a></li>
            <li><a href="{% url 'category' 2 %}">日韩专区</a></li>
            <li><a href="{% url 'category' 3 %}">河北区</a></li>

          </ul>
          <ul class="nav navbar-nav navbar-right">
              <!-- 如果用户已经登录，就显示用户名，否则显示一个注册登录的连接
              显示username而不是账户名，request中带有user，通过原生user表去反向查询关联的userprofile表的usernmae字段-->
              {% if request.user.is_authenticated %}
                <li class="dropdown">
                  <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ request.user.userprofile.name }} <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="{%  url 'new_article' %}">发帖</a></li>
                    <li><a href="http://v3.bootcss.com/examples/navbar-fixed-top/#">Another action</a></li>
                    <li><a href="http://v3.bootcss.com/examples/navbar-fixed-top/#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="http://v3.bootcss.com/examples/navbar-fixed-top/#">Separated link</a></li>
                    <li><a href="{% url 'logout' %}">注销</a></li>
                  </ul>
                </li>
              {% else %}
                <li><a href="{% url 'login' %}">注册\登录</a></li>
              {% endif %}
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
        {% block page-container %}
            <!-- {{ articles }}
            获取用户请求url路径，不包括ip和端口
            {{ request.path }}   -->
            <div class="row"> <!-- bootstrap,一行12格，外层div要有class=‘row’，里层div直接写占几格col-md-x; -->
                <div class="col-md-8 left-content-panel">
                    <div class="content-box">
                        <!-- 左边的内容，一个文章占一个div
                         一个文章里，左边是图片，右边是标题等文字,占比同样是用col-md-x;
                         文章后发布的在上面，reversed  -->
                        {% for article in articles reversed %}
                            <div class="article-box row">
                                <div class="article-head-img col-md-3">
                                    <img src="{{ article.head_img }}">
                                </div>
                                <div class="article-sumury col-md-9">
                                    <p><a href="{% url 'article_detail' article.id %}" >{{ article.title }}</a></p>
                                    <div class="article-attr">
                                        <ul class="list-inline">
                                            <li>作者：{{ article.author.name }}</li>
                                            <li>创建时间：{{ article.publish_date }}</li>
                                            <!--  models反向查询：通过谁关联我的表，可以取到table_set的一个集合
                                             再通过select_related，将集合变成一个列表，计算数量；-->
                                            <li>赞：{{ article.thumbup_set.select_related.count }}</li>
                                            <li>评论：{{ article.comment_set.select_related.count }}</li>
                                        </ul>
                                    </div>
                                    <span>简介：{{ article.summary }}</span>
                                </div>
                            </div>
                            <hr>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-4 right-sidebar">
                    bar
                </div>
            </div>

        {% endblock %}
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/plugin/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            $('#navbar li').click(founction(){
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            });
            如果按照上面的这种方法，在index页面click跳转到其它页面，它只在index页面中标签点亮了，
            跳转之后，页面刷新，又显示了母版的active标签，被click的标签还是没有active的class；
            所以，要在当前页面，即当前页面框架加载完成，根据用户请求url路径，找到此标签，加入active样式；
            注意：在js中调用templatetags变量，要加引号；如果不确定输出格式，可以在浏览器的console中尝试。
            > $("#navbar a[href='/category/1/']")
            < [<a href=​"/​category/​1/​">​欧美专区​</a>​]
            综合区index也在urls里设置一个name='index'别名，也可以符合模板语言了{% url 'index' %}，当然用‘/’也可以；
            */
            var menus = $("#navbar a[href='{{ request.path }}']")[0];
            $(menus).parent().addClass('active');
            $(menus).parent().siblings().removeClass('active');
        })
    </script>

{% block bottom-js %}
{% endblock %}
</body></html>